<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>元素属性-性质的操作(Operations on Element Attributes - Property)</title>
  <!-- 
  在 JavaScript 中，操作元素属性的方式有很多，其中通过属性（Property）来操作元素属性是一种常见的方法。
  1. 属性与属性值

  在 JavaScript 中，DOM 元素的属性可以通过对象的属性来访问和修改。
    const element = document.getElementById('myElement');
    element.id = 'newId'; // 修改 id 属性
    element.className = 'newClass'; // 修改 class 属性
    element.style.color = 'blue'; // 修改内联样式

  2. 常用的属性
  - id：获取或设置元素的唯一标识符。
  - className：获取或设置元素的类名。
  - innerHTML：获取或设置元素的 HTML 内容。
  - textContent：获取或设置元素的文本内容。
  - style：获取或设置元素的样式，通常用来修改 CSS 属性。
  - src：用于  `<img>` 、 `<script>`  等元素，获取或设置资源的路径。
  - href：用于  `<a>`  元素，获取或设置链接的目标地址。

  3. 读取和修改属性
  通过属性访问和修改元素的属性非常方便。
    const element = document.getElementById('myElement');
    console.log(element.className); // 读取 class 属性
    element.className = 'newClass'; // 修改 class 属性
  4. 自定义属性
  HTML5 允许使用自定义属性，通常以  `data-`  开头。可以通过  `dataset`  属性来访问这些自定义属性：
    element.dataset.custom = 'customValue'; // 设置自定义属性
    console.log(element.dataset.custom); // 获取自定义属性

  5. 注意事项
  - 属性与 DOM 属性的区别：在某些情况下，DOM 属性与 HTML 属性可能会有所不同。例如，HTML 中的  `checked`  属性在 DOM 中是一个布尔值，而在 HTML 中是字符串。
  - 大小写敏感：属性名是区分大小写的。例如， `className`  和  `classname`  是不同的属性。
  - 性能：直接通过属性访问比  `getAttribute()`  和  `setAttribute()`  更高效，因此在频繁操作时建议使用属性。
   -->
</head>
<body>

  <h3>对象中的属性称之为property</h3>
  <div id="attribute-id" class="attribute-class" title="attribute-title" data-custom="attribute-custom" age="19">元素中的属性称之为attribute, 标准的attribute在对应的对象模型中都有对应的property</div>

  <input type="checkbox" checked>
  <input type="text" class="account" placeholder="请输入账号">
  <button class="submit">设置input的值</button>

  <script>

    // 对象中的属性称之为property
    const obj = {
      // property
      name: '张三',
      age: 18
    }

    // 1. 通过property访问attribute的值
    const attributeId = document.getElementById('attribute-id');
    const inputEl = document.querySelector('input');
    const accountEl = document.querySelector('.account');
    console.log(attributeId.id, attributeId.className, attributeId.title, attributeId.dataset.custom, attributeId.age); // property-id property-class property-title attribute-custom undefined
    
    if (inputEl.checked) {
      console.log('input被选中');
    } else {
      console.log('input未被选中');
    }

    // 2. 通过attribute访问property的值
    console.log(accountEl.getAttribute('class')); // account
    console.log(accountEl.getAttribute('placeholder')); // 请输入账号

    // 3. 通过property设置attribute的值
    attributeId.id = 'new-id';
    attributeId.className = 'new-class';
    attributeId.title = 'new-title';
    attributeId.dataset.custom = 'new-custom';
    attributeId.age = 20;
    console.log(attributeId.id, attributeId.className, attributeId.title, attributeId.dataset.custom, attributeId.age); // new-id new-class new-title new-custom 20

    // 4. 点击按钮设置input值
    const btnEl = document.querySelector('button');
    btnEl.addEventListener('click', () => {
      accountEl.setAttribute("value", "123456")
      // accountEl.value = '123456'; 优先级最高
      accountEl.value = "7890";
    });
    
  </script>
  
</body>
</html>